import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../utils/request' //请求二次封装后的axios

Vue.use(Vuex)

export default new Vuex.Store({
  state: {  //定义(初始化)状态
     data:[],
     curIndex:0, //默认下标
     carData:[] //
  },
   //mutations下的所有方法的第一个参数均为state
   //mutations下的所有方法的第二个参数为payload(载荷) ==> 期望payload得到的值为对象
   //处理同步操作
  mutations: {
      set_data(state,payload){
          state.data = payload.data 
      },
      change_curIndex(state,payload){ //改变下标的方法
          state.curIndex = payload.curIndex
      },
      //添加数量的方法
      add_product(state,payload){
          state.data.forEach(v=>{
              v.children.forEach(item => {
                if(item.id === payload.id){
                    item.num++
                    //往购物车中添加商品
                    let index = state.carData.findIndex(pro => pro.id === item.id)
                    if(index < 0){
                        //深拷贝 商品 ==> 避免重复添加
                        state.carData.push(JSON.parse(JSON.stringify(item)))
                    }else{
                        state.carData[index].num++
                    }
                }
              })
          })
      },
      //减少数量的方法
      sub_product(state,payload){
        state.data.forEach(v=>{
            v.children.forEach(item => {
              if(item.id === payload.id && item.num){
                  item.num--
                   //往购物车中添加商品
                   let index = state.carData.findIndex(pro => pro.id === item.id)
                   state.carData[index].num-- //对应商品自减
                   if(state.carData[index].num < 1){
                      state.carData.splice(index,1) //删除该商品
                   }
              }
            })
        })
    },
  },  
  //处理异步操作
  //actions中的方法的第一个参数: context ==> 和new Vuex.Store具有相同属性和方法的对象 
  //actions中的方法不能直接操作state,而是调用mutations中的方法来操作state
  actions: {
      get_data({commit}){ //从context中解构出commit方法 ==> 用来调用mutations里的方法
        //console.log(context)
        axios.get('/api/list').then(res=>{
            commit({type:'set_data',data:res.data.data})
        })
      }
  },
  //类似于组件中的计算属性
  //getters中的方法的第一个参数也是state
  getters:{
      sum_num(state){
          return state.carData.reduce((prev,next)=>{
              return prev + next.num
          },0)
      },
      sum_price(state){
        return state.carData.reduce((prev,next)=>{
            return prev + next.num * next.price
        },0)
      }
  },
  //拆分vuex数据 
  modules: {

  }
})
